<template>
  <div class="hot_more">
    <van-swipe
      class="my-swipe"
      indicator-color="#f50"
      :duration="1000"
      :height="130"
      :autoplay="1500"
    >
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>

    <div class="title">
      <span class="line"></span>
      <span class="tt">{{ title }}</span>
      <span class="line"></span>
    </div>

    <ul class="com" v-if="isShow">
      <li v-for="item in list" :key="item.id">
        <a>
          <goods-item
            :id="item.id"
            :cate_id="item.cate_id"
            :image="item.image"
            :price="item.price"
            :sales="item.sales"
            :store_name="item.store_name"
            :vip_price="item.vip_price"
          ></goods-item>
        </a>
      </li>
    </ul>

    <ul class="pro" v-else>
      <li v-for="item in list" :key="item.id">
        <a>
          <goods-item1
            :id="item.id"
            :cate_id="item.cate_id"
            :image="item.image"
            :price="item.price"
            :ot_price="item.price"
            :stock="item.stock"
            :store_name="item.store_name"
          ></goods-item1>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import GoodsItem from "@/components/goods/GoodsItem.vue";
import GoodsItem1 from "@/components/goods/GoodsItem1.vue";
export default {
  data() {
    return {
      title: "首发",
      num: 0,
      banner: [],
      list: [],
      isShow:true
    };
  },
  components: {
    GoodsItem,
    GoodsItem1,
  },
  created() {
    this.num = this.$route.params.id;

    if (this.num == 1) {
      this.title = "精品推荐";
    } else if (this.num == 2) {
      this.title = "热门榜单";
    } else if (this.num == 3) {
      this.title = "新品首发";
    } else {
      this.title = "促销单品";
      this.isShow = false
    }
   
    

    // console.log(this.$route)
    this.intiData();
  },
  methods: {
    intiData() {
      let url = `/api/groom/list/${this.num}?page=1&limit=20`;
      let pro = axios({
        method: "get",
        url: url,
      })
        .then((res) => {
          let { status, data } = res.data;
          if (status == 200) {
            this.list = data.list;
            this.banner = data.banner;
          }
          console.log("成功", res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
  },
  mounted(){
    this.$nextTick(()=>{
      if(this.title){
        document.title = this.title
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.com {
  padding: 15px 0 0 0;
  background-color: #fff;
  li {
    padding: 0px 0px 12px 15px;
  }
}
.pro {
    background-color: #fff;
  li {
    padding: 12px 15px;
  }
}
.title {
  height: 51px;
  display: flex;
  justify-content: center;
  align-items: center;
  .line {
    width: 60px;
    height: 2px;
    background-color: #ddd;
  }
  .tt {
    color: #282828;
    font-size: 15px;
    padding: 0 15px;
  }
}
/deep/.van-swipe-item {
  > img {
    width: 100%;
    height: 100%;
  }
}
/deep/.van-swipe__indicators {
  left: 90%;
}
</style>

